<template>
  <div>
    <mt-header title="注册" class="d1">
      <mt-button
        icon="back"
        slot="left"
        class="d2"
        @click="getlogin"
      ></mt-button>
      <router-link to="/login" slot="right">登录</router-link>
    </mt-header>
    <div id="sam">
      <img src="../assets/samzc.jpg" alt="" />
    </div>

    <!-- 输入框 -->
    <mt-field
      type="text"
      placeholder="请输入用户名"
      label="用户名:"
      disableClear
      v-model="name"
      :state="nameState"
      @blur.native.capture="checkName"
    ></mt-field>
    <mt-field
      type="password"
      placeholder="请输入密码"
      label="密码:"
      disableClear
      v-model="pwd"
      :state="pwdState"
      @blur.native.capture="checkpwd"
    ></mt-field>
    <mt-field
      type="phone"
      placeholder="请输入手机号码"
      label="手机号:"
      disableClear
      :attr="{ maxlength: '11' }"
      style="border-bottom: 1px solid #d9d9d9"
      v-model="phone"
      :state="phoneState"
      @blur.native.capture="checkphone"
    ></mt-field>
    <mt-button
      type="primary"
      size="large"
      style="margin-top: 40px"
      @click="samForm"
      >快速注册</mt-button
    >
    <div id="samhy">
      还不是山姆会员? &nbsp; 成为会员, &nbsp;<a href="#">购买会籍></a>
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      name: "",
      nameState: "",
      pwd: "",
      pwdState: "",
      phone: "",
      phoneState: "",
    };
  },
  methods: {
    checkName() {
      let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,40}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
    checkpwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    checkphone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.phoneState = "success";
        return true;
      } else {
        this.phoneState = "error";
        return false;
      }
    },
    samForm() {
      if (this.checkName() && this.checkpwd() && this.checkphone()) {
        console.log("验证成功");
        // 发送post请求,执行注册业务
        this.axios
          .post(
            "/user/register",
            `uname=${this.name}&upassword=${this.pwd}&uphone=${this.phone}`
          )
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
               MessageBox.alert("注册成功").then(function () {
                window.location.href = "/login";
              });
            } else if (res.data.code == 201) {
              MessageBox.alert("此用户名已存在,请更换其他用户名")
            }
          });
      }
    },
    getlogin() {
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped>
.d1 {
  background-color: #fff !important;
  color: black !important;
  font-size: 16px;
}
#sam img {
  width: 80vw;
  position: relative;
  left: 10vw;
}
#samhy {
  font-size: 15px;
  color: #999;
  margin-top: 27vh;
  text-align: center;
}
#samhy a {
  color: blue;
}
</style>
